HTML - Elementos componentes do HTML 5
Classes dos elementos HTML:
1-ELEMENTOS BÁSICOS: <body>2-ELEMENTOS DE METADADOS: <base><head><link><meta><style>
3-ELEMENTOS DE SEÇÕES DE CONTEÚDO: <address><article><aside> <footer> <header><h1> a <h6><hgroup><nav>
4-ELEMENTOS DE CONTEÚDOS EM TEXTO: <dd><dl><dt><div><figure> <figcaption><hr><li><main><ol><p><pre><ul>
5-ELEMENTOS DE TEXTO EM LINHA: <a><abbr><b><br><cite><code> <data><dfn><em><i><kbd><mark><q><s><samp> <small><span><strong><sub><sup><time><u><var>
6-ELEMENTOS DE IMAGEM E MULTIMÍDIA: <img><area><audio><map><track><video>
7-ELEMENTOS DE CONTEÚDOS EMBARCADOS :<embed><object><param><source>
8-ELEMENTOS DE SCRIPT: <canvas><noscript><script>
9-ELEMENTOS DE MARCAÇÃO DE EDIÇÃO: <del> <ins>
10-ELEMENTOS DE CONTEÚDOS EM TABELA: <caption><col><colgroup><table> <tbody><td><tfoot><th><thead><tr>
11-ELEMENTOS DE FORMULÁRIO: <button><datalist><fieldset><form><input> <label><legend><meter><optgroup><option><output><progress> <select><textarea>
12-ELEMENTOS INTERATIVOS: <details><menu><menuitem><summary>
Neste documento discutiremos a classe 6 - ELEMENTOS DE IMAGEM E MULTIMÍDIA.
1-<img>
A tag <img> define uma imagem em uma página HTML.A tag <img> possui dois atributos obrigatórios: src e alt.
Nota: As imagens não são tecnicamente inseridas em uma página HTML, as imagens são vinculadas às páginas HTML. A tag <img> cria um espaço de espera para a imagem referenciada.
Dica: Para vincular uma imagem a outro documento, basta aninhar a tag <img> dentro das tags <a>.
Exemplo:
<img src="../imagens/smile.jpg" alt="Sorria" height="42" width="42">
Como o browser exibe:
Importante :
1-Muitas vezes desejamos colocar o fundo transparente numa imagem.
O único formato que permite isso é o gif no padrão GIF89. Cuidado, existe outro padrão chamado GIF87 que não permite o fundo transparente.
2-Podemos usar imagens animadas que são chamados d GIF Animados.
2-<area> (map e area)
Veja a tag map a seguir.3-<audio>
A tag audio toca um áudio do tipo MP3, WAV, and OGG.O IE só toca MP3. O Safari não toca OGG. Chrome, Firefox e Opera tocam todos formatos.
Quanto aos parâmetros temos:
| Atributo | Valor | Descrição |
|---|---|---|
| autoplay | reprodução automática | Especifica que o áudio começará a ser reproduzido assim que estiver pronto. |
| Controls | Controles | Especifica que os controles de áudio devem ser exibidos (como um botão de reprodução / pausa etc.) |
| loop | loop | Especifica que o áudio será reiniciado novamente toda vez que terminar. |
| muted | mudo | Especifica que a saída de áudio deve ser silenciada |
| preload | pré-carregamento automático | Especifica que o áudio deve ser carregado quando a página for carregada. |
| src | URL | Especifica o URL do arquivo de áudio |
Exemplo de uso:
<audio controls>
<source src="../audios/Ring05.wav" type="audio/mpeg"> <!-- type="audio/ogg"-->
Seu browser não suporta audios mp3/mpeg.
</audio>
Como o browser exibe:
4-<map> - Tags map e area - Mapa de imagem client-side
Esta tag permite mapear um trecho da página que ao ser clicado atua como um link.Um exemplo bom de uso desta tag é quando tempos um mapa (que seria uma imagem) mas ao clicar em diferentes partes deste mapa iremos para diferentes destinos ( o que não dá pra fazer com uma tag img pura).
Podemos definir coordenadas da página e ao clicar dentro ou fora dessas coordenadas disparamos links para outras páginas.
A tag map agrupa os itens e a tag area define a área de cada imagem componente do map.
A tag map nos browsers antigos era exibida do tipo em bloco mas apartir do html5 ela é exibida tipo em linha.
Veja o exemplo :Tag Map
O parâmetro shape define uma forma para a área clicável. Valores possíveis :
default
rect - Retângulo
circle - Círculo
poly - Poliedro
já o parâmetro COORDS pode ter o seguinte formato dependendo do shape selecionado :
rect - esquerda, topo, direita, rodapé
circle - centro-x, centro-y, raio
poly - x1, y1, x2, y2, ...
5-<track> (video-track)
Veja a tag video logo abaixo.6-<video>
O elemento HTML <track> é usado como filho dos elementos de mídia<audio> e <video>. Ele permite que você especifique faixas de texto temporizadas (ou dados baseados em tempo), por exemplo, para lidar automaticamente com legendas. As faixas são formatadas em WebVTT format (arquivos .vtt) — Web Video Text Tracks or Timed Text Markup Language (TTML).Exemplo de aplicação:
<video controls poster="../imagens/ArcodoTriunfo.jpg">
<source src="../videos/Funny short videos.mp4" type="video/mp4"> </video>
Como o browser exibe:
Atributos
| Atributo | Utilidade |
|---|---|
| default | Este atributo indica que a trilha deve ser ativada, a menos que as preferências do usuário indiquem que outra trilha é mais apropriada. Isso pode ser usado apenas em um elemento de faixa por elemento de mídia. |
| kind |
Como a faixa de texto deve ser usada. Se omitido, o tipo padrão é legendas. Se o atributo não
estiver presente, ele usará as legendas. Se o atributo contiver um valor inválido, ele usará
metadados. (As versões do Chrome anteriores a 52 tratavam um valor inválido como legenda.)
As seguintes palavras-chave são permitidas: legendas / Subtitles Legendas fornecem tradução de conteúdo que não pode ser entendido pelo visualizador. Por exemplo, diálogo ou texto que não seja inglês em um filme no idioma inglês. As legendas podem conter conteúdo adicional, geralmente informações extras. Por exemplo, o texto no início dos filmes de Guerra nas Estrelas, ou a data, hora e local de uma cena. As legendas ocultas fornecem uma transcrição e, possivelmente, uma tradução de áudio. Pode incluir informações não verbais importantes, como sugestões musicais ou efeitos sonoros. Pode indicar a fonte da sugestão (por exemplo, música, texto, personagem). Adequado para usuários surdos ou com o som mudo. captions: Descrição textual do conteúdo do vídeo. Adequado para usuários cegos ou onde o vídeo não pode ser visto. chapters/capítulos: Os títulos dos capítulos devem ser usados quando o usuário estiver navegando no recurso de mídia. metadata (metadados): Faixas usadas por scripts. Não visível para o usuário. |
| label(rótulo) | Um título legível pelo usuário da faixa de texto que é usado pelo navegador ao listar as faixas de texto disponíveis. |
| src | Endereço da faixa (arquivo .vtt). Deve ser um URL válido. Este atributo deve ser especificado e seu valor de URL deve ter a mesma origem que o documento - a menos que o elemento pai <audio> ou <video< do elemento track tenha um atributo crossorigin. |
| srclang | Idioma dos dados do texto da faixa. Deve ser uma etiqueta de idioma BCP 47 válida. Se o atributo de tipo estiver definido como legenda, srclang deverá ser definido. |
Notas de uso:
1-O tipo de dados que a trilha adiciona à mídia é definido no atributo kind, que pode receber valores de legendas, legendas, descrições, capítulos ou metadados. O elemento aponta para um arquivo de origem contendo texto cronometrado que o navegador expõe quando o usuário solicita dados adicionais.
Um elemento de mídia não pode ter mais de uma faixa com o mesmo tipo, srclang e rótulo.
2-Alguns servidores restringem a reprodução de vídeo por causa da largura de banda ou peso na rede do provedor.